<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
    <style>
        .fu {
            padding: 50px;
            background-color: rgba(157, 157, 157, 0.847);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .layui-timeline {
            width: 300px;
            /* height: 300px; */
            background-color: white;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
        }

        .box {
            font-size: 20px;
            font-weight: 900;
            margin-bottom: 15px;
        }

        .layui-timeline-title {
            position: relative;
            top: -8px;
            margin-left: 15px;
        }

        .layui-timeline-title div {
            color: gray;
        }

        .layui-icon-email {
            font-size: 30px;
        }

        .layui-timeline-item:before {
            left: 10px;
        }

        /*  */
        #main {
            background-color: white;
            border-radius: 15px;
        }

        #mains {
            margin-top: 30px;
            background-color: white;
            border-radius: 15px;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div class="layui-timeline">
            <div class="box">通知公告</div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">公司员工守则
                        <div>2018-11-12</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">关于交易手候费优惠政策的通知
                        <div>2018-10-19</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">国庆节安排的通知<div>2018-10-01</div>
                    </div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis layui-icon-email"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">818促销日:全场满5000送500<div>2018-08-18</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="mains" style="width: 600px;height:400px;"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        $.ajax({
            type: 'GET',
            url: 'https://www.zzgoodqc.cn/index.php/index/index/getOrders',
            dataType: 'json',
            success: (a) => {
                console.log(a);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                const dataX = ['4月', '5月', '6月', '7月', '8月', '9月'];
                const y = a.data.arr;
                const y1 = a.data.list;
                option = {
                    title: {
                        text: '订单统计趋势图',
                        left: 10,
                        top: 15,
                        textStyle: {
                            color: '#111111', // 标题颜色
                            fontWeight: 'bold',
                            fontSize: 16,
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(33,56,77,1)',
                        borderColor: 'rgba(33,56,77,1)',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        },
                        axisPointer: {
                            lineStyle: {
                                color: 'rgba(19,255,241,1)',
                                type: 'dashed',
                                width: 2
                            }
                        }
                    },
                    legend: {
                        right: 'center',
                        top: '5%',
                        itemWidth: 16,
                        itemHeight: 16,
                        itemGap: 25,
                        icon: 'stack',
                        textStyle: {
                            color: '#E1E5E6'
                        }
                    },
                    grid: {
                        top: '16%',
                        right: '4%',
                        bottom: '4%',
                        left: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        data: dataX,
                        type: 'category',
                        boundaryGap: true,
                        axisLabel: {
                            textStyle: {
                                color: '#B5C5D4',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false // 去除刻度线
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: { show: false },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#B5C5D4',
                                fontSize: 12
                            }
                        },
                        // y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: '#9EA6B4',
                                type: 'solid'
                            }
                        }
                    },
                    series: [
                        {
                            name: '总金额',
                            smooth: true,
                            type: 'line',
                            // 填充颜色设置
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            },
                            // 开始不显示拐点， 鼠标经过显示
                            showSymbol: false,
                            symbolSize: 8,
                            // 设置拐点颜色以及边框
                            itemStyle: {
                                color: 'rgba(253, 190, 93, 1)'
                            },
                            data: y1
                        },
                        {
                            name: '订单数',
                            smooth: true,
                            type: 'line',
                            // 填充颜色设置
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            },
                            // 开始不显示拐点， 鼠标经过显示
                            showSymbol: false,
                            symbolSize: 4,
                            // 设置拐点颜色以及边框
                            itemStyle: {
                                // color: "rgba(241,162,42,1)",
                                color: 'rgba(26, 119, 221, 1)'
                            },
                            data: y
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: (e) => {
                console.log(e);
            }
        })
        var myChart = echarts.init(document.getElementById('mains'));
        function fu() {
            option = {
                title: {
                    text: '订购商品数'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'right',

                },
                series: [
                    {
                        name: '总销售',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 4260, name: '今日' },
                            { value: 3970, name: '比昨日' },
                            { value: 3454, name: '本周' },
                            { value: 2395, name: '上周同期' }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
        fu()
    </script>
</body>

</html>